<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8" />
    <meta content="text/html"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <title>安联车检-注册</title>
    <link rel="stylesheet" href="../css/register.css" />
    <link rel="stylesheet" href="../css/zoomify.css" />
    <link rel="stylesheet" href="../css/layer.css" />
    <script src="../js/jquery-3.2.0.min.js"></script>
    <script src="../js/register.js"></script>
    <script src="../js/zoomify.min.js"></script>
    <script src="../js/layer.js"></script>
</head>
<body>
    <header>
        <div class="header-content">
            <a href="/index/home" class="logo"></a>
            <span class="welcomeSpan" th:text="#{registerHtml.welcome}"></span>
            <div class="login"><span th:text="#{registerHtml.hasAccount}"></span><a href="/index/home" th:text="#{registerHtml.pleaseLogin}"></a> </div>
        </div>
    </header>
    <main>
        <section>
            <form action="/user/confirmRegister" method="post" id="registerFrom" enctype="multipart/form-data">
            <div class="main-content-L">
                    <div class="form-list">
                        <label for="username" th:text="#{registerHtml.userName}"></label>
                        <input type="text" id="username" name="username" th:placeholder="#{registerHtml.userNameTip}" />
                        <i></i>
                    </div>
                    <div class="form-validate">
                        <i></i>
                        <span></span>
                    </div>
                    <div class="form-list">
                        <label for="usertype" th:text="#{registerHtml.userType}"></label>
                        <label class="label-type active" for="usertype" data-type="0" th:text="#{registerHtml.userTypePerson}"></label><label class="label-type" for="usertype" data-type="1" th:text="#{registerHtml.userTypeCompany}"></label><label class="label-type" for="usertype" data-type="2" th:text="#{registerHtml.userTypeProxy}"></label>
                        <input type="hidden" name="usertype" id="usertype" value="0" />
                    </div>
                    <div class="form-validate">
                        <span></span>
                    </div>
                    <div class="form-list">
                        <label for="password" th:text="#{registerHtml.password}"></label>
                        <input type="password" id="password" name= "password" th:placeholder="#{registerHtml.passwordTip}" />
                        <i></i>
                    </div>
                    <div class="form-validate">
                        <i></i>
                        <span></span>
                    </div>

                    <div class="form-list">
                        <label for="Repassword" th:text="#{registerHtml.repassword}"></label>
                        <input type="password" id="repassword" name= "repassword" th:placeholder="#{registerHtml.repasswordTip}" />
                        <i></i>
                    </div>
                    <div class="form-validate">
                        <i></i>
                        <span></span>
                    </div>

                    <div class="form-list">
                        <label for="telphone" id="country" th:text="#{registerHtml.telphone}"></label>
                        <input type="tel" id="telphone" name="telphone" th:placeholder="#{registerHtml.telphoneTip}" />
                        <i></i>
                    </div>
                    <div class="form-validate">
                        <i></i>
                        <span></span>
                    </div>
                    <div class="form-list">
                        <label for="identifycode" th:text="#{registerHtml.identifycode}"></label>
                        <input type="text" id="identifycode" name="identifycode" th:placeholder="#{registerHtml.identifycodeTip}" style="width:90px"/>
                        <i></i>
                        <img src="/index/getVerify" alt="" id="vcode" border="1"/>
                    </div>
                    <div class="form-validate">
                        <i></i>
                        <span></span>
                    </div>
                    <div class="form-list">
                        <label for="telIdentify" th:text="#{registerHtml.telIdentify}"></label>
                        <input type="text" id="telIdentify" name="telIdentify" style="width: 120px;" th:placeholder="#{registerHtml.telIdentifyTip}" />
                        <i></i>
                        <btn class="btnCode" id="phoneVcode" th:text="#{registerHtml.telIdentifyBtn}"></btn>
                    </div>
                    <div class="form-validate">
                        <i></i>
                        <span></span>
                    </div>
                    <div class="form-check">
                        <input type="checkbox" id="userAgree" name="userAgree" checked="checked" style="vertical-align: middle;"/>
                        <span th:text="#{registerHtml.userAgree}"></span> <span class="agreeTip" th:text="#{registerHtml.userAgreeTip}"></span>
                    </div>
                    <div class="form-validate">
                        <i></i>
                        <span></span>
                    </div>
                    <button class="form-submit" th:text="#{System.nowRegister}"></button>
            </div>
            <div class="main-content-R">
               <div class="companyReg" style="display: none">
                    <a href="#">
                        <i></i>
                        <span></span>
                    </a>
                </div>
               <div class="form-list" style="display: none">
                    <label for="realname" th:text="#{registerHtml.realname}"></label>
                    <input type="text" id="realname" name="realname" th:placeholder="#{registerHtml.realnameTip}" />
                    <i></i>
                </div >
                <div class="form-validate" style="display: none">
                    <i></i>
                    <span></span>
                </div>
                <div class="form-list" style="display: none">
                    <label for="idcard" th:text="#{registerHtml.idcard}"></label>
                    <input type="text" id="idcard" name="idcard" th:placeholder="#{registerHtml.idcardTip}" />
                    <i></i>
                </div>
                <div class="form-validate" style="display: none">
                    <i></i>
                    <span></span>
                </div>
                <div class="form-list" style="display: none">
                    <label for="companyname" th:text="#{registerHtml.companyname}"></label>
                    <input type="text" id="companyname" name="companyname" th:placeholder="#{registerHtml.companynameTip}" style="width:210px" />
                    <i></i>
                </div>
                <div class="form-validate" style="display: none">
                    <i></i>
                    <span></span>
                </div>
                <div class="form-list" style="display: none">
                    <label th:text="#{registerHtml.verifyphoto}"></label>
                    <span id="filePicker" class="selectfile"><span th:text="#{registerHtml.verifyphotoSel}"></span>
                        <input type="file" id="verifyphoto" name="verifyphoto" style="position:absolute;left:0;top:0;z-index:999;opacity:0;cursor: pointer; direction: ltr;font-size: 0;width: 80%;height:0" accept="image/gif, image/jpeg, image/png, image/jpg"/>
                    </span>
                    <img id="image-holder" class="thumb-image" style="display: none;">
                    <span id="fileDel" class="delfile" style="display: none;" th:text="#{registerHtml.verifyphotoDel}">
                    </span>
                    </img>
                </div>
                <div class="form-validate" style="display: none">
                    <i></i>
                    <span></span>
                </div>
                <div class="phoneReg">
                    <p style="text-align: center;margin-bottom: 10px;" th:text="#{registerHtml.wechatTip}"></p>
                    <img src="../img/QRCode.png" height="180px" width="180px"/>
                </div>
            </div>
            <div class="clearfix"></div>
            </form>
            <div  style="display: none">
                <div  id="popAgreeTip">
                    <div class="pop-content">
                        <h3>注册用户协议</h3>
                        <p class="pop-content-p"></p>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <footer>
        <p>
            <a href="">关于我们</a><span></span>
            <a href="">联系我们</a><span></span>
            <a href="">人才招聘</a><span></span>
            <a href="">广告服务</a><span></span>
            <a href="">关于我们</a>
        </p>
        <p>Copyright©2004-2016   </p>
    </footer>
</body>
</html>